
html {
    font-size: 25px;
}
.wp {
    margin: 0 auto;
    width: 1000px;
}

.left, .middle, .right {
    float: left;
}

.left {
    width: 200px;
    line-height: 500px;
    background-color: green;
}
 
.right {
    width: 200px;
    line-height: 500px;
    background-color: pink;
}

.middle {
    width: 600px;
    line-height: 500px;
    background-color: violet;
}

@media screen and (min-width: 640px) and (max-width: 999px) {
    .wp {
        margin: 0 auto;
        width: 800px;
    }

    .continer {
        overflow: hidden;
    }

    .right {
        float: none;
        width: 100%;
        line-height: 200px;
    }
    
}

@media screen and (max-width:640px) {
    .left, .middle {
        float: none;
    }

    .left {
        width: 100%;
        line-height: 200px;
    }

    .middle {
        width: 100%;
        line-height: 200px;
    }

    .right {
        width: 100%;
        line-height: 200px;
    }

}
 